import "./Projects.scss";
import axios from "axios";

interface Project {
  name: string;
  desc: string;
  img: string;
  category: string;
  url: string;
}
type ShowProject = [
  { title: "FontEnd"; items: Project[] },
  // { title: "BackEnd", items: Project[] },
  { title: "Node"; items: Project[] }
];
interface ProjectRequestData {
  status: string;
  data: {
    data: Project[];
    results: number;
  };
}

const Projects = memo(() => {
  const [curIndex, setCurIndex] = useState(0);
  const [projects, setProjects] = useState<ShowProject>([
    { title: "FontEnd", items: [] },
    // { title: "BackEnd", items: [] },
    { title: "Node", items: [] },
  ]);
  // const Title = ["FrontEnd", "BackEnd", "Node"];
  const Title = ["FrontEnd", "Node"];

  useEffect(() => {
    axios.get<ProjectRequestData>("api/projects").then((res) => {
      const data = res.data.data;
      // 整理数据
      for (const index in data.data) {
        const item = data.data[index];
        if (item.category === "frontEnd") {
          projects[0].items.push(item);
        }
        // else if (item.category === "backEnd") {
        //   projects[1].items.push(item);
        // }
        else if (item.category === "node") {
          projects[1].items.push(item);
        }
      }
      setProjects([...projects]);
    });
  }, []);

  return (
    <section className="projects-com" id="projects">
      <div className="container">
        <p className="big-title">Projects</p>
        <p className="big-desc">Here are some of my works</p>
        <div className="choose-box">
          {Title.map((title, index) => (
            <p
              className={curIndex === index ? "active" : ""}
              onClick={() => {
                setCurIndex(index);
              }}
              key={index}
            >
              {title}
            </p>
          ))}
        </div>
        <div className="show-box">
          {projects[curIndex].items.map((v, i) => (
            <div
              className="show-img"
              key={i}
              onClick={() => {
                if (v.url && v.url !== "#") {
                  window.open(v.url, "_blank");
                }
              }}
            >
              <img src={v.img} alt="img load error" />
              <div className="mask-box">
                <div className="name">{v.name}</div>
                <div className="desc">{v.desc}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
});

export default Projects;
